<template>
  <div class="forgetCommon">
    <h2 class="title">没有填写备注怎么办？</h2>
    <h5 class="h5">请提供您充值金额与支付宝充值订单号，核实后立马到账。</h5>
    <div class="saveIntro">
      <div class="eggBox">
        <div class="showEgg">
          <img src="@/assets/images/saveMoney.png" alt="egg">
          <span>提供信息示例</span>
        </div>
        <div class="fillEgg">
          <div class="tabs">
            <p>
              <span>充值金额：</span>
              <strong>50</strong>
            </p>
            <p>
              <span>支付宝充值订单号：</span>
              <strong>2018091522001477930555549680</strong>
            </p>
          </div>
          <p>填写信息示例</p>
        </div>
      </div>
      <p>充值未填写备注挽救说明</p>
    </div>
    <h2 class="title toFill">请填写</h2>
    <ul class="fillBox">
      <li>
        <span>充值金额</span>
        <el-input v-model="chargeNum" type="number" class="inp-160" size="small" placeholder="请输写金额"></el-input>
      </li>
      <li>
        <span>支付宝充值订单号</span>
        <el-input v-model="orderNum" class="inp-160" size="small" placeholder="请输写订单号"></el-input>
      </li>
      <li class="footer">
        <b class="button-w" @click="goLast">上一步</b>
        <b class="button-n" @click="surePost">确认</b>
      </li>
    </ul>
  </div>
</template>
<script type="text/ecmascript-6">
import { mapGetters, mapActions } from 'vuex'
export default {
  name: 'forgetCommon',
  computed: {
    ...mapGetters([
      'userInfo'
    ])
  },
  data () {
    return {
      chargeNum: '',
      orderNum: ''
    }
  },
  methods: {
    goLast () {
      window.history.go(-1)
    },
    surePost () {
      if (this.chargeNum === '') {
        this.$message({
          message: '请填写金额',
          type: 'warning'
        })
      } else if (this.orderNum === '') {
        this.$message({
          message: '请填写订单号',
          type: 'warning'
        })
      } else {
        this.$ajax.post('/api/seller/account/forgetRechargeComment', {
          telephone: this.userInfo.userName,
          money: Math.abs(this.chargeNum),
          transcationNo: this.orderNum,
          sellerAccountId: this.userInfo.sellerAccountId
        }).then((res) => {
          if (res.data.code === '200') {
            this.getMoney()
            this.$message({
              message: '操作成功',
              type: 'success'
            })
          }
        })
      }
    },
    getMoney () {
      this.$ajax.post('/api/seller/account/getSellerInfoBySellerAccountId', {
        sellerAccountId: this.userInfo.sellerAccountId
      }).then((data) => {
        if (data.data.code === '200') {
          this.setSellerInfo(data.data.data)
        } else {
          this.$message({
            message: data.data.message,
            type: 'warning'
          })
        }
      })
    },
    ...mapActions([
      'setSellerInfo'
    ])
  }
}
</script>
<style lang="stylus" rel="stylesheet/stylus" scoped>
.forgetCommon
  .title
    fontSize(22px, 30px, #333333)
    font-family PingFang-SC
    font-weight bold
  h5.h5
    fontSize(16px, 20px, #666666)
    margin-top 20px
  .saveIntro
    margin-top 10px
    width 700px
    .eggBox
      border 1px solid #EEEEEE
      padding 20px
      display flex
      .showEgg
        display flex
        flex-direction column
        text-align center
        img
          width 200px
          box-shadow 0 2px 4px RGBA(0, 0, 0, 0.13)
        span
          fontSize(14px, 20px, #666666)
          margin-top 10px
      .fillEgg
        margin-top 40px
        margin-left 40px
        flex 1
        .tabs
          border 1px solid #eeeeee
          padding 10px 15px
          p
            border-bottom 1px solid #EEEEEE
            display flex
            justify-content space-between
            align-items center
            // height 20px
            // line-height 20px
            fontSize(12px, 22px, #666666)
            padding 5px 0
            span
              width 130px
              text-align right
            strong
              flex 1
              text-align right
            &:last-child
              border-bottom none
        >p
          fontSize(14px, 20px, #666666)
          margin-top 14px
          text-align center
    >p
      fontSize(14px, 20px, #666666)
      margin-top 14px
      text-align center
  .toFill
    margin-top 20px
    margin-bottom 15px
  .fillBox
    border 1px solid #eeeeee
    padding 15px
    width 700px
    box-sizing border-box
    li
      margin-bottom 20px
      display flex
      flex-direction column
      span
        fontSize(12px, 18px, #666666)
        margin-bottom 8px
      .inp-160
        width 240px
    .footer
      flex-direction row
</style>
